<!--
* @Author: zhangjing
* @Date: 2025-03-17 11:37:42
* @Description: 随机抽答=>
-->
<template>
	<pannel @reback="reback" style="height: calc(100vh - 160px)">
		<audio ref="music" src="/mp3/djs.mp3" crossOrigin="anonymous" preload @timeupdate="ondjsTimeupdate"></audio>
		<audio ref="bgmusic" src="/mp3/hkbg.mp3" crossOrigin="anonymous" preload @timeupdate="onTimeupdate"></audio>
		<div class="list flex-1 flex flex-align-center flex-pack-center">
			<template v-if="!isStart && userList.length == 0">
				<img src="/impromptu/notice.png" class="img01" />
				<!-- <img src="/impromptu/books.png" class="img02" /> -->
				<img src="/impromptu/caidai.png" class="img03" />
				<img src="/impromptu/drawstraws.png" class="img04" />
			</template>
			<template v-if="isStart || userList.length > 0">
				<div class="drawstraws">
					<div
						class="drawstraws-item"
						:class="{
							ani: isStart,
						}"
						v-for="(item, index) in userList"
						:key="index"
					>
						<div class="drawstraws-item-img"></div>
						<div class="drawstraws-item-text">{{ item.studName }}</div>
					</div>
				</div>
			</template>
		</div>
		<div class="conbox-ft flex flex-align-center">
			<div class="setUserNums flex flex-align-center">
				<div class="flex flex-align-center">
					<a-checkbox :checked="isRepeat" @change="onCheckRepeat">
						<span style="font-size: 16px">可以重复抽答</span>
					</a-checkbox>
					<a-popover title="已抽答学生名单" trigger="click">
						<template slot="content">
							<div v-for="(item, index) in selectStuList" :key="index">
								{{ item.studName }}
							</div>
							<a-button
								style="margin-top: 10px"
								type="danger"
								size="small"
								v-if="selectStuList.length > 0"
								@click.stop="clearStuList"
							>
								清空已抽答学生名单
							</a-button>
							<a-empty v-else />
						</template>
						<a-button type="primary"> 已抽答学生名单 </a-button>
					</a-popover>
				</div>
				<div class="flex flex-align-center" style="margin-left: 10px">
					<span class="setUserNums-title">抽答人数</span>
					<div class="setUserNums-input">
						<a-input-number
							@change="startDrawstraws"
							v-model="count"
							:min="1"
							:max="onlineStuList.length > 5 ? 5 : onlineStuList.length"
						/>
					</div>
					<span class="num">最大可以选择{{ onlineStuList.length > 5 ? 5 : onlineStuList.length }}人</span>
				</div>
			</div>
		</div>
	</pannel>
</template>

<script>
/* 数组切割 */
function splitArray(array, size) {
	var result = [];
	for (var i = 0; i < array.length; i += size) {
		result.push(array.slice(i, i + size));
	}
	return result;
}
function GetRandomNum(Min, Max) {
	var Range = Max - Min;
	var Rand = Math.random();
	return Min + Math.round(Rand * Range);
}
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
import bus from '@/utils/eventBus';
import { debounce } from '@/utils/base.js';
import pannel from './pannel.vue';
let timer = null;
export default {
	name: 'drawstraws',
	components: { pannel },
	props: {
		//接收器信息
		machineData: {
			type: Object,
			default: () => {},
		},
		//表单数据
		formData: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			isStart: false,
			count: 1,
			userList: [],
			alluserList: [],
			isRepeat: true,
			selectIds: [],
			csId: '',
			isFilterOnline: true, //在在线学生中抽取
		};
	},
	created() {
		let beginClassData = this.$ls.get('beginClass'); //上课数据
		this.csId = beginClassData.csId;
	},
	computed: {
		...mapState({
			deviceType: (state) => state.websockStore.deviceType,
			studentList: (state) => state.websockStore.studentList,
			stopDeviceEventList: (state) => state.websockStore.stopDeviceEventList,
			isPro: (state) => state.isPro,
		}),
		onlineStuList() {
			return this.studentList && this.studentList.length > 0
				? this.studentList.filter((item) => {
						//不可重复，需要过滤掉已经选中过的同学
						if (
							((this.isFilterOnline && item.status == 1) || !this.isFilterOnline) &&
							(this.isRepeat || (!this.isRepeat && !this.selectIds.includes(item.studId)))
						) {
							return item;
						}
				  })
				: [];
		},
		selectStuList() {
			return this.studentList && this.studentList.length > 0
				? this.studentList.filter((item) => {
						//不可重复，需要过滤掉已经选中过的同学
						if (this.selectIds.includes(item.studId)) {
							return item;
						}
				  })
				: [];
		},
	},
	methods: {
		//开始随机抽答
		startDrawstraws() {
			if (this.count <= 0 || this.onlineStuList.length <= 0) {
				return;
			}
			this.stopDrawstraws();
			this.selectIds = [];
			this.isStart = true;
			this.userList = [];
			this.alluserList = splitArray(this.onlineStuList, Math.floor(this.onlineStuList.length / this.count));
			this.move();
			this.$refs.bgmusic.play();
		},
		stopDrawstraws() {
			if (this.isStart) {
				this.isStart = false;
				clearInterval(timer);
				let stuIds = this.userList.map((item) => item.studId);
				let selectIds = Array.from(new Set([...this.selectIds, ...stuIds]));
				this.selectIds = selectIds;
				this.$refs.music.pause();
				this.$refs.bgmusic.pause();
				this.$refs.music.currentTime = 0;
				this.$refs.bgmusic.currentTime = 0;
			}
		},
		move() {
			var interTime = 60; //设置间隔时间
			timer = setInterval(() => {
				let list = [];
				for (var i = 0; i < this.count; i++) {
					var num = GetRandomNum(0, this.alluserList[i].length - 1);
					list.push({
						...this.alluserList[i][num],
						status: 1,
						num,
					});
				}
				this.userList = list;
			}, interTime);
		},
		onCheckRepeat(e) {
			this.isRepeat = e.target.checked;
			this.count = 1;
		},
		onCheckFilterOnline(e) {
			this.isFilterOnline = e.target.checked;
			this.count = 1;
		},
		/* 清空已抽搭的学生名单 */
		clearStuList() {
			this.selectIds = [];
			this.count = 1;
		},
		onTimeupdate(e) {
			let currentTime = e.target.currentTime;
			if (currentTime >= 6 && this.$refs.music.paused) {
				this.$refs.music.play();
			}
			console.log('currentTime', currentTime);
		},
		//倒计时结束3s后，调用停止
		ondjsTimeupdate(e) {
			let currentTime = e.target.currentTime;
			if (currentTime >= 3 && this.isStart) {
				this.stopDrawstraws();
			}
		},
		//返回
		reback() {
			this.$emit('reback');
		},
	},
};
</script>

<style lang="less" scoped>
.img01 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 300px;
	height: 290px;
}
.img02 {
	width: 200px;
	height: 200px;
	position: absolute;
	bottom: 30px;
	left: 80px;
}
.img03 {
	width: 468px;
	height: auto;
	position: absolute;
	top: 0;
	right: -80px;
}
.img04 {
	width: 500px;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%;-50%);
}

.conbox-ft {
	margin: 20px 40px;
	.save-btn {
		background: @primary-color;
		margin: 0 auto;
		width: 300px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		color: #fff;
		font-size: 30px;
		font-weight: bold;
		border-radius: 40px;
		cursor: pointer;
		&.red {
			background: #e64343 !important;
			border-color: rgba(230, 67, 67, 0.5) !important;
		}
	}
	.save-btn.disabeld {
		background: #becad4;
	}
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}
}

/deep/.setUserNums {
	// position: absolute;
	// left: 15px;
	// top: 15px;
	.setUserNums-input {
		border: 1px solid @primary-color;
		border-radius: 23px;
		margin-left: 10px;
		input,
		.ant-input-number {
			border: none;
			height: 38px;
			border-radius: 23px;
			font-size: 15px;
			font-weight: bold;
			width: 140px;
		}
		.ant-input-number-handler-wrap {
			border-radius: 0 23px 23px 0 !important;
		}
		.ant-select-selection {
			border: none;
			height: 38px;
			border-radius: 23px;
			font-size: 15px;
		}

		.ant-select-selection__rendered {
			line-height: 38px;
		}
	}

	.num {
		color: #f00;
		font-size: 16px;
		margin-left: 10px;
	}
	.setUserNums-title {
		left: -5em;
		color: #000;
		font-size: 16px;
	}
}

.drawstraws {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	.drawstraws-item {
		width: calc(100% / 3); /* 每个元素宽度为100% / 3 */
		box-sizing: border-box;
		padding: 10px; /* 添加内边距 */
		text-align: center; /* 文字居中 */
		width: 230px;
		height: 230px;
		margin: 10px 20px;
		border-radius: 50%;
		cursor: pointer;
		font-size: 35px;
		font-weight: bold;
		color: @primary-color;
		position: relative;
		.drawstraws-item-img {
			width: 100%;
			height: 100%;
			display: block;
			background: url(/impromptu/circle.png);
			background-size: 100% 100%;
		}
		.drawstraws-item-text {
			width: 230px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			margin: 0;
		}
		&.ani {
			.drawstraws-item-img {
				animation: skill infinite 4s cubic-bezier(0.54, -0.65, 0.52, 1.68);
			}
			.drawstraws-item-text {
				animation: skill_text infinite 4s cubic-bezier(0.54, -0.65, 0.52, 1.68);
			}
		}
	}

	@keyframes skill {
		0% {
			transform: rotate(0deg);
			box-shadow: none;
		}
		50% {
			box-shadow: 0 0 10px var(--primary), inset 0 0 20px var(--primary);
		}
		100% {
			transform: rotate(720deg);
			box-shadow: none;
		}
	}

	@keyframes skill_text {
		0%,
		100% {
			color: var(--bright);
			text-shadow: none;
		}
		50% {
			color: var(--primary);
			text-shadow: 0 0 6px var(--primary);
		}
	}
}
.praisebar {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 18px;
	.praiselist {
		text-decoration: underline;
		color: @primary-color;
		margin-left: 20px;
	}
}
</style>
